<template>
  <div class="dashboard-container">
    <el-row :gutter="20" style="margin:0px 0px 10px 0px">
      <el-col :span="6" >
        <div class="grid-content">
          <div class="title">
          <i class="el-icon-document"></i>
          事项
        </div>
        <div class="content">
          <div class="group">
            <div class="item">待发货<span class="number">18</span></div>
            <div class="item">低评分<span class="number">18</span></div>
          </div>
          <div class="group">
            <div class="item">待售后<span class="number">18</span></div>
            <div class="item">库存预警<span class="number" style="color: #ff9966">18</span></div>
          </div>
        </div>
        </div>
      </el-col>
      <el-col :span="6" >
        <div class="grid-content">
          <div class="title">
          <i class="el-icon-document"></i>
          订单
        </div>
        <div class="content order">
          <div class="group">
            <div class="item">今日订单数/金额<span class="number">99999 <span style="color:#999">/</span> <span>￥9999999</span></span></div>
            <div class="item">本周订单数/金额<span class="number">18</span></div>
          </div>
          <div class="group">
            <div class="item">本年度总订单数/金额<span class="number">99999</span></div>
            <div class="item">历史总订单数/金额<span class="number" style="color: #ff9966">9999999</span></div>
          </div>
        </div>
        </div>
        <!--  -->
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['user']),
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    height: calc(100vh - 50px);
    padding: 20px;
    background-color: #f5f5f5;
    font-size: 14px;
  }
  // font-size: 14px;
}
.grid-content {
  background-color: #fff;
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
  .title {
    display: flex;
    align-items: center;
    border-bottom: 1px #f5f5f5 solid;
    padding: 6px 0px;
    i {
      margin-right: 10px;
    }
  }
  .content {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin-top: 10px;
    .group{
      width:100%;
      display: flex;
    }
    .item {
      width: 95%;
      display: flex;
      flex-direction: column;
      padding: 10px;
      background-color: #f5f5f5;
      margin: 0px 8px 8px 0px;;
      
      color: #888;
      .number {
        font-size: 26px;
        font-weight: 600;
        color: #008888;
        margin: 10px 0px;
      }
    }
  }
  .order{
    .number{
      color: #5e6d82!important;
      font-size: 18px!important;
    }
  }
}
</style>
